<%--
  Created by IntelliJ IDEA.
  User: 17271
  Date: 2022/5/6
  Time: 8:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <script src="../js/jquery-3.3.1.min.js"></script>

</head>
<style type="text/css">
    #top {
        margin: 0 auto;
        width: 80%;
        margin-top: 8%;
    }

    table {
        width: 100%;
        margin: 0px auto;
    }

    .but {
        background: dodgerblue;
        height: 30px;
        border-radius: 5px;
        border: none;
    }

    /*添加用户*/
    #add {
        background: white;
        width: 30%;
        height: 400px;
        border-radius: 8px;
        /*float: left;*/
        position: fixed;
        margin-top: 100px;
        margin-left: 30%;
        display: none;
    }

    /*添加用户*/
    #edit {
        background: white;
        width: 30%;
        height: 400px;
        border-radius: 8px;
        /*float: left;*/
        position: fixed;
        margin-top: 100px;
        margin-left: 30%;
        display: none;
    }

    td {
        /*border: 1px solid black;*/
    }
    input[type='button']:hover{
        cursor: pointer;
    }
    button:hover{
        cursor: pointer;
    }
</style>
<script>

</script>
<body>
<!--添加用户弹框-->
<div id="add">
    <table style="width: 90%;height: 90%;margin: auto">
        <form method="post" autocomplete="off">
            <tr>
                <td colspan="2" style="text-align: center;font-size: 28px;">添加用户</td>
            </tr>
            <tr>
                <td>用户名:</td>
                <td><input id="username_add" type="text" name="username" placeholder="请输入用户名"/></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input id="password_add" type="text" name="password" placeholder="请输入密码"/></td>
            </tr>
            <tr>
                <td>姓名:</td>
                <td><input id="name_add" type="text" name="name" placeholder="请输入姓名"/></td>
            </tr>
            <td>性别:</td>
            <td>
                <select id="sex_add" name="sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><input id="age_add" type="text" name="name" placeholder="请输入年龄"/></td>
            </tr>
            <tr>
                <td>联系方式:</td>
                <td><input id="phone_add" type="text" name="name" placeholder="请输入联系方式"/></td>
            </tr>
            <tr style="text-align: center">
                <td><input id="confirmAdd" type="button" value="确认"
                           style="background: dodgerblue;width: 80px;height: 30px;border: none;border-radius: 6px">
                </td>
                <td><input id="cancelAdd" type="button" value="取消"
                           style="background: dodgerblue;width: 80px;height: 30px;border: none;border-radius: 6px">
                </td>
            </tr>
        </form>
    </table>
</div>

<!--修改用户信息弹框-->
<div id="edit">
    <table style="width: 90%;height: 90%;margin: auto">
<%--        action="http://localhost:8080/booksystem/member?method=update"--%>
        <form method="post"  autocomplete="off">
            <tr>
                <td colspan="2" style="text-align: center;font-size: 28px;">修改用户信息</td>
            </tr>
            <tr>
                <td>用户名:</td>
                <td><input id="username_edit" type="text" name="username" placeholder="请输入用户名"
                           value=""/></td>
            </tr>
            <tr>
                <td>
                    密码:
                </td>
                <td>
                    <input id="password_edit" type="text" name="password" placeholder="请输入密码" value=""/>
                </td>
            </tr>
            <tr>
                <td>姓名:</td>
                <td><input id="name_edit" type="text" name="name" placeholder="请输入姓名" value=""/></td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    <select id="sex" name="sex">
                        <option value="男" class="sex_edit">男</option>
                        <option value="女" class="sex_edit">女</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><input id="age_edit" type="text" name="age" placeholder="请输入年龄"/></td>
            </tr>
            <tr>
                <td>联系方式:</td>
                <td><input id="phone_edit" type="text" name="phone" placeholder="请输入联系方式"/>
                </td>
            </tr>
            <tr style="text-align: center">
                <td><input type="button" value="确认" id="confirmUpdate"
                           style="background: dodgerblue;width: 80px;height: 30px;border: none;border-radius: 6px">
                </td>
                <td><input type="button" value="取消" id="cancelUpdate"
                           style="background: dodgerblue;width: 80px;height: 30px;border: none;border-radius: 6px">
                </td>
            </tr>
        </form>
    </table>
</div>

<div id="top">
    <div>
        <input class="but" id="addUser" type="button" value="添加用户" style="background: dodgerblue;height:30px;">
        <input type="text" id="searchContent" placeholder="请输入用户名或id">
        <input class="but" id="search" type="button" value="搜索">
    </div>
    <div>
        <table style="text-align: center">
            <tr>
                <td>用户ID</td>
                <td>用户名</td>
                <td>密码</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>电话号码</td>
                <td>删除操作</td>
                <td>修改操作</td>
            </tr>
            <c:forEach items="${users}" var="user">
                <tr>
                    <td>${user.id}</td>
                    <td>${user.username}</td>
                    <td>${user.password}</td>
                    <td>${user.name}</td>
                    <td>${user.sex}</td>
                    <td>${user.age}</td>
                    <td>${user.phone}</td>
                    <td>
                        <button value="${user.id}" class="delete"
                                style="background: dodgerblue;border-radius: 6px;font-size: 18px;border: none">删除
                        </button>
                    </td>
                    <td>
                        <button value="${user.id}" class="update"
                                style="background: dodgerblue;border-radius: 6px;font-size: 18px;border: none">修改
                        </button>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </div>
</div>

<script>
    var deleteButton = document.getElementsByClassName("delete");
    for (let button of deleteButton) {
        //当点击删除按钮时
        button.onclick = function () {
            var id = button.getAttribute("value");
            $.ajax({
                url: "http://localhost:8080/booksystem/member",
                async: true,
                data: "method=deleteUser&id=" + id,
                type: "GET",
                dataType: "text",
                success: function (data) {
                    //在成功后重新查询用户信息,并刷新
                    $.ajax(
                        {
                            url: "http://localhost:8080/booksystem/member",
                            async: true,
                            data: "method=findAllUser",
                            type: "GET",
                            dataType: "text",
                            success: function (data) {
                                window.location.href = "user.jsp";
                            },
                            error: function () {
                            }
                        }
                    );

                },
                error: function () {
                    alert("删除失败!")
                }
            })
        }
    }
    //获取修改按钮
    var updateElement = document.getElementsByClassName("update");
    for (let updateButton of updateElement) {
        updateButton.onclick = function () {
            var userId = updateButton.getAttribute("value");

            //发送ajax请求,获取该用户的信息
            $.ajax(
                {
                    url: "http://localhost:8080/booksystem/member",
                    async: true,
                    data: "method=findUser&id=" + userId,
                    type: "Get",
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        var edit = document.getElementById("edit");
                        edit.style.display = "block";
                        //获取各个input对象,并赋值
                        $("#username_edit").attr("value", data.username);
                        $("#password_edit").attr("value", data.password);
                        $("#name_edit").attr("value", data.name);
                        $("#age_edit").attr("value", data.age);
                        $("#phone_edit").attr("value", data.phone);
                        var sex_edit = document.getElementsByClassName("sex_edit");
                        for (ele of sex_edit) {
                            if (data.sex === ele.innerText) {
                                ele.setAttribute("selected", true);
                            }
                        }
                    },
                    error: function () {
                        alert("发生了错误");
                    }

                }
            );
        }
    }
    //设置弹框取消按钮的功能
    var cancelUpdate = document.getElementById("cancelUpdate");
    cancelUpdate.onclick = function () {
        var edit = document.getElementById("edit");
        edit.style.display = "none";
    }
    //设置确认按钮的功能,提交修改
    var confirmUpdate = document.getElementById("confirmUpdate");

    confirmUpdate.onclick = function (){
        var username=$("#username_edit").val();
        var password=$("#password_edit").val();
        var name=$("#name_edit").val();
        var age=$("#age_edit").val();
        var phone=$("#phone_edit").val();
        var sex = $("#sex option:selected").val();
           $.ajax({
               url:"http://localhost:8080/booksystem/member?method=update",
               async: true,
               data: "username="+username+"&password="+password+"&age="+age+"&sex="+sex+"&phone="+phone+"&name="+name,
               type:"post",
               dataType:"text",
               success:function (data) {
                   var edit = document.getElementById("edit");
                   edit.style.display = "none";
                   $.ajax(
                       {
                           url: "http://localhost:8080/booksystem/member",
                           async: true,
                           data: "method=findAllUser" ,
                           type: "GET",
                           dataType: "text",
                           success: function (data) {
                               window.location.reload(true);
                           },
                           error: function () {
                           }
                       }
                   )
               },
               error:function (data) {
               }
           });
    }

    //设置添加用户的功能
    var add = document.getElementById("add");
    var addUser = document.getElementById("addUser");
    addUser.onclick=  function (){
        add.style.display = "block";
    }
    //设置添加栏的取消按钮功能
    var cancelAdd = document.getElementById("cancelAdd");
    cancelAdd.onclick = function () {
        //将弹框里的信息清除
        $("#username_add").val("");
        $("#password_add").val("");
        $("#name_add").val("");
        $("#age_add").val("");
        $("#phone_add").val("");
        add.style.display = "none";
    }
    //设置确认添加功能
    var confirmAdd = document.getElementById("confirmAdd");
    confirmAdd.onclick = function (){
        var username = $("#username_add").val();
        var password = $("#password_add").val();
        var name = $("#name_add").val();
        var age = $("#age_add").val();
        var phone = $("#phone_add").val();
        var sex = $("#sex_add option:selected").attr("value");
        $.ajax({
            url:"http://localhost:8080/booksystem/member?method=addUser",
            async:true,
            data:"username="+username+"&password="+password+"&age="+age+"&sex="+sex+"&phone="+phone+"&name="+name,
            type:"post",
            dataType:"text",
            success:function (data){
                $.ajax(
                    {
                        url: "http://localhost:8080/booksystem/member",
                        async: true,
                        data: "method=findAllUser" ,
                        type: "post",
                        dataType: "text",
                        success: function (data) {
                            window.location.reload(true);
                        },
                        error: function () {
                        }
                    }
                )
                location.reload();
            },
            error:function (data){

            }
        })
    }

    //设置搜索功能
    var search = document.getElementById("search");
    search.onclick = function () {
        var searchContent = $("#searchContent").val();
        if (searchContent != ""){
            $.ajax({
                url:"http://localhost:8080/booksystem/member?method=search",
                async:true,
                data:"searchContent="+searchContent,
                dataType:"text",
                type:"post",
                success:function (data){
                    location.reload();
                },
                error:function (data) {
                }
            })
        }else {         //如果搜索栏为空,则搜索所有用户
            $.ajax(
                {
                    url: "http://localhost:8080/booksystem/member",
                    async: true,
                    data: "method=findAllUser" ,
                    type: "GET",
                    dataType: "text",
                    success: function (data) {
                        window.location.reload(true);
                    },
                    error: function () {
                    }
                }
            )
        }

    }

</script>
</body>

</html>